<template>
    <div class="wrapper" @click="handleClick">
      <div class="dot" :style="{backgroundColor: curBgColor}"></div>
    </div>
</template>

<script>
import {getCurrentInstance, reactive, toRefs, watch} from "vue";

export default {
  name: "Dot",
  props: {
    curItem: Number,
    itemLen: Number,
    bgColor: String,
  },
  setup(props, ctx) {
    const instance = getCurrentInstance()
    const state = reactive({
      selfItem: instance.vnode.key - 1,
      curBgColor: "white"
    })
    watch(() => {
      return props.curItem
    }, (value) => {
      if(value === state.selfItem)
        state.curBgColor = props.bgColor
      else
        state.curBgColor = "white"
    }, {
      immediate: true
    })

    const handleClick = () => {
      ctx.emit('handleClick', state.selfItem)
    }
    return {
      ...toRefs(state),
      handleClick
    }
  }
}
</script>

<style scoped>
  .dot {

  }
  .wrapper {
    position: relative;

    float: left;

    height: 15px;
    width: 15px;
    border-radius: 15px;
    background-color: rgba(73, 73, 73, 0.6);

    padding: 1px;
    margin: 0 1px;

    z-index: 1;
  }
  .dot {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    height: 13px;
    width: 13px;
    border-radius: 13px;

    margin: auto;

    background-color: white;
  }
</style>